<template>
    
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="togleCollapse">
          <i v-if="this.isCollapse" class="iconfont icon-zhankai"></i>
          <i v-else class="iconfont icon-zhankai1"></i>
        </div>
        <el-menu :unique-opened="true" :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath" text-color="black" active-text-color="white">
           <!-- :unique-opened="true"->只允许展开一个菜单 -->
           <!-- router -> 导航开启路由模式 -->
          <!-- 一级菜单  -->
          <el-submenu :index="item.menuId+''" v-for="item in menuList" :key="item.menuId" >
            <!-- 一级菜单的模板区域 -->
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.menuName}}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item :index="subItem.url" v-for="subItem in item.children" :key="subItem.menuId" @click="saveNavState(subItem)" :class="{'active':currentIndex==subItem.menuId}">
              <!-- 导航开启路由模式：
                将index值作为导航路由 -->
              <!-- 二级菜单的模板区域 -->
              <i class="el-icon-menu"></i>
              <template slot="title">
                <span>{{ subItem.menuName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
    </el-aside>
</template>   
<script>
import sessionUtil from "@/utils/session";
export default {
  data() {
    return {
      currentIndex: 4,
      // 左侧菜单数据
      menuList: [
    		{
			"menuId": 1,
			"menuName": "消息配置",
			"icon": "iconfont icon-lanmupeizhi",
			"parentId": -1,
			"orderNumber": "1",
			"creatorId": 2,
			"createDate": "2020-07-06 10:00:04",
			"delFlag": 0,
			"hidden": "0",
			"children": [
				{
					"menuId": 4,
					"menuName": "平台配置",
					"url": "/configManage",
					"parentId": 1,
					"orderNumber": "1",
					"creatorId": 2,
					"createDate": "2022-07-06 10:00:04",
					"delFlag": 0,
					"hidden": "0"
				}
			]
		},
		{
			"menuId": 8,
			"menuName": "消息推送",
			"icon": "iconfont icon-fasongxinxi",
			"parentId": -1,
			"orderNumber": "2",
			"creatorId": 2,
			"createDate": "2020-07-06 10:00:04",
			"delFlag": 0,
			"hidden": "0",
			"children": [
				{
					"menuId": 9,
					"menuName": "发送消息",
					"url": "/sendMessage",
					"parentId": 2,
					"orderNumber": "1",
					"creatorId": 2,
					"createDate": "2022-07-06 10:00:04",
					"delFlag": 0,
					"hidden": "0"
				}
			]
		}
      ],
      // 默认不折叠
      isCollapse: true,
      // 被激活导航地址
      activePath: "",
    };
  },
  created() {
    this.activePath = window.localStorage.getItem("activePath");
  },
  methods: {
    // 菜单的折叠与展开
    togleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    // 保存连接的激活地址
    saveNavState(subItem) {
      window.localStorage.setItem("activePath", subItem.url);
      console.log(subItem.menuId);
      this.currentIndex = subItem.menuId;
    },
  },
  
};
</script>

<style lang="less" scoped>

.active {
  background-color: #33C0FF;
  color: #fff !important;
  i {
	color: #fff !important;
  }
}

.el-aside {
  height: 100%;
  background-color: white;
  .el-menu {
    border: none;
  }
}
.iconfont {
  color: rgb(12, 1, 1);
  font-size: 20px;
}
// .el-menu-item {
//   background-color: rgb(13, 1, 1);
// }

// .el-menu-item i{
//   color: black;
// }

.toggle-button {
  background-color: white;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.second_menu{
  background-color: blue;
}
</style>
